import moment from 'moment';
import React from 'react';
import calendarStyle from './index.less';
class Calendars extends React.Component {
  constructor() {
    super();
    this.state = {
      dataTime: [],
    };
  }
  componentDidMount() {
    var times = [
      { value: 7, name: '日' },
      { value: 1, name: '一' },
      { value: 2, name: '二' },
      { value: 3, name: '三' },
      { value: 4, name: '四' },
      { value: 5, name: '五' },
      { value: 6, name: '六' },
    ];
    let week = moment().day();
    if (week == 0) {
      week = 7;
    }
    for (var i = 0; i < times.length; i++) {
      if (week == times[i].value) {
        times[i].nowDt = true;
      } else {
        times[i].nowDt = false;
      }
      times[i].days = moment().day(times[i].value).format('DD');
    }
    this.setState({
      dataTime: times,
    });
  }
  //获取时间
  nowTime = () => {
    let week = moment().day();
    switch (week) {
      case 1:
        return '周一';
      case 2:
        return '周二';
      case 3:
        return '周三';
      case 4:
        return '周四';
      case 5:
        return '周五';
      case 6:
        return '周六';
      case 0:
        return '周日';
    }
  };
  render() {
    return (
      <>
        <div className={calendarStyle.top}>
          <p className={calendarStyle.det}>{moment().format('YYYY年M月DD日')}</p>
          <p className={calendarStyle.detDay}>{this.nowTime()}</p>
        </div>
        <div className={calendarStyle.todos}>
          <ul>
            {this.state.dataTime &&
              this.state.dataTime.map((item, index) => {
                return (
                  <li key={index} className={item.nowDt ? calendarStyle.NowStyle : calendarStyle.normalStyle}>
                    <span>{item.name}</span>
                    <span>{item.days}</span>
                  </li>
                );
              })}
          </ul>
        </div>
        <div className={calendarStyle.bottomLine}></div>
      </>
    );
  }
}
export default Calendars;
